<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="cart_page" id="app">
			<div class="cart_head">
				<h2 class="blue">购物车 </h2>
				<div class="admin"><span @click="onAdmin()">{{isAdmin ? '取消':'管理'}}</span></div>
			</div>
			<div style="height: .84rem;"></div>
			<div class="main confirmorders">
				<ul class="search_list" v-if="goodsList.length > 0">
					<li v-for="(item,i) in goodsList" :key="i" class="align-center">
						<div class="check" @click="selectFun(item.id)"><img
								:src="SelectId.includes(item.id) ? '__API__/lib/images/check.png':'__API__/lib/images/nocheck.png'"
								alt="" /></div>
						<div class="li">
							<div class="img"><img :src="item.single_pic" alt=""></div>
							<div class="info">
								<div class="left">
									<h3>{{item.title}}</h3>
									<span>{{item.type_title}}</span>
									<p class="price">￥{{item.price}}</p>
								</div>
								<div class="addnum" v-if="!isAdmin">
									<span @click="carts(i,item.number,'sub')"><img src="__API__/lib/images/sub.png" alt=""></span>
									<input type="text" name="" class="buynumber" id="" v-model="item.number" disabled>
									<span @click="carts(i,item.number,'add')"><img src="__API__/lib/images/add.png" alt=""></span>
								</div>
								<div class="delete blue_btn" @click="deleteFun(i)" v-else>
									删除
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="null_box" v-else>
					<div class="img"><img src="__API__/lib/images/car_null.png" alt=""></div>
					<p>购物车还是空的哦~</p>
				</div>
			</div>
			<div class="fb"></div>
			<div class="footercart cart_boot align-center" style="bottom: 1rem;">
				<div class="checksAll" @click="allFun()">
					<img :src="goodsList.length != 0 && (SelectId.length == goodsList.length) ? '__API__/lib/images/check.png':'__API__/lib/images/nocheck.png'"
						alt="" />
					<label>全选</label>
				</div>
				<div class="footercart_left confirmfoot_left">
					<p>总价格：<span class="red_color">￥{{totalPrice}}</span></p>
					<p>共有<span class="red_color">{{totalNum}}</span>件商品</p>
				</div>
				<div class="footercart_right">
					<div class="foot_btn cart_btn" :style="isAdmin ? 'background-color:#e1e1e1;color:#666666':''"
						@click="isAdmin ? '':goPay()">立即下单</div>
				</div>
			</div>
			<!--footer-->
			<div class="fb"></div>
			<div class="footer">
				<div class="li" v-for="(item,i) in navList" :key="i">
					<span @click="goDetail(item.path)">
						<img :src="pageIndex == i ? item.selecticonPath : item.iconPath">
					</span>
					<p :class="{'blue':pageIndex == i}">{{item.title}}</p>
				</div>
			</div>

		</div>
		<script>
			var token = localStorage.getItem('token');
			if(!token){
				window.location = "{:url('login')}";
			}
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					pageIndex: 2,
					navList: [{
							path: "{:url('index')}",
							iconPath: '__API__/lib/images/nav1.png',
							selecticonPath: '__API__/lib/images/nav1_on.png',
							title: '首页'
						},
						{
							path: 'classification.html',
							iconPath: '__API__/lib/images/nav2.png',
							selecticonPath: '__API__/lib/images/nav2_on.png',
							title: '全部'
						},
						{
							path: 'cart.html',
							iconPath: '__API__/lib/images/nav3.png',
							selecticonPath: '__API__/lib/images/nav3_on.png',
							title: '购物车'
						},
						{
							path: 'my.html',
							iconPath: '__API__/lib/images/nav4.png',
							selecticonPath: '__API__/lib/images/nav4_on.png',
							title: '我的'
						}
					],
					isAdmin: false,
					cartNum: 4,
					totalPrice: 0,
					totalNum: 0,
					goodsList: [
					],
					allCheck: false,
					SelectId: [],
					SelectList: []

				},
				computed: {
					SelectList() { // 已选列表
						return this.goodsList.filter((item) => {
							if (this.SelectId.includes(item.id)) {
								return item
							}
						})
					},
					// 计算总价
					totalPrice() {
						let Price = 0
						this.SelectList.forEach((item) => {
							Price += parseFloat(item.price) * parseFloat(item.number)
						})
						return Price
					}

				},
				created: function() {

					var that = this;

					common.ajax("{:url('Member/my')}",{type:'cart',token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						if(res.data.level_id == 0){
							common.alert('游客不支持购物车',' ')
							//common.showToast('游客不支持购物车');
							setTimeout(function() {
								common.PageBack();
							}, 1500)
						}
						// that.getData(searchValue);
					})

					var type = "{:input('type')}";
					common.ajax("{:url('Cart/index')}",{type:'cart',token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.goodsList = res.data;
						that.totalPrice = res.total_price;
						that.totalNum = res.total_count;
						that.cartNum = res.total_count;
						// that.getData(searchValue);
					})
				},
				methods: {
					goDetail(url) {

						common.openUrl(url)
					},
					//管理
					onAdmin() {
						this.isAdmin = !this.isAdmin;
					},
					//立即下单
					goPay() {
						console.log('aaa')
						let that = this;
						let SelectId = that.SelectId;
						var cart_ids = '';

						console.log(SelectId);
						console.log();
						if(SelectId.length <= 0){
							return common.alert('请选择商品！',' ');
						}
						common.openUrl("{:url('order_submit')}?cart_id="+SelectId.join(',')+'&type=cart');
						//common.openUrl('')
					},
					//数量
					carts(i, num, type) {
						let that = this;


						if (type == 'sub') {
							if (num > 1) {
								that.goodsList[i].number--;
							}
						}
						if (type == 'add') {
							that.goodsList[i].number++;
						}
						common.ajax("{:url('Cart/update_num')}",{cart_id:that.goodsList[i].id,token:localStorage.getItem('token'),number:that.goodsList[i].number} , function(res) {
							//common.showToast(res.msg);

							// that.getData(searchValue);
						})
						this.getnewsum();
						this.getnumcount();
					},
					// 全选、反选
					allFun() {
						console.log('all')
						if (this.SelectId.length == this.goodsList.length) {
							this.SelectId = [] // 判断是否已全部选中，是则清空已选列表
						} else {
							this.goodsList.forEach((item) => {
								if (!this.SelectId.includes(item.id)) {
									this.SelectId.push(item.id) // 否则将未选中的全部加入已选列表中
								}
							})
						}
						this.getnewsum();
						this.getnumcount();
					},
					// 单选、多选
					selectFun(id) {
						if (!this.SelectId.includes(id)) {
							this.SelectId.push(id) // 判断已选列表中是否存在该id，不是则追加进去
						} else {
							let index = this.SelectId.indexOf(id) // 求出当前id的所在位置
							this.SelectId.splice(index, 1) // 否则则删除
						}
						this.getnewsum();
						this.getnumcount();
					},
					// 删除当前项
					deleteFun(index) {
						// idIndex是指求出被删除项的id在this.SelectId中的所处位置
						let that = this;
						let idIndex = that.SelectId.indexOf(that.goodsList[index].id);
						var cart_id = that.goodsList[index].id;
						common.Confirm('确定要删除此商品？', ' ', function() {
							that.SelectId.splice(idIndex, 1) // 删除当前项的购物车记录
							that.goodsList.splice(index, 1) // 删除当前项

							that.getnewsum();
							that.getnumcount();
							common.ajax("{:url('Cart/destory')}",{cart_id:cart_id,token:localStorage.getItem('token')} , function(res) {
								//common.showToast(res.msg);

								// that.getData(searchValue);
							})
						})

					},
					//计算总价
					getnewsum() {
						let that = this;
						let num = 0;
						this.goodsList.find((item) => {
							if (that.SelectId.includes(item.id)) {
								num += parseFloat(item.price) * item.number;
							}
						});
						this.totalPrice = num;
					},
					//计算总数
					getnumcount() {
						let that = this;
						let count = 0;
						this.goodsList.find((item) => {
							if (that.SelectId.includes(item.id)) {
								count += item.number;
							}
						});
						this.totalNum = count;
					},
				},
			});
		</script>
	</body>

</html>
